<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>订单详情</title>
		<!-- import Vue before Element -->
		<script src="../static/js/vue.js"></script>
		<!-- import JavaScript -->
		<script src="../static/js/element.js"></script>
		<script src="../static/js/axios.js"></script>
			<link rel="stylesheet" href="../static/elementui/theme-chalk/index.css">
	</head>
	<style type="text/css">
		/* 		div{
			border: 1px black solid;
		} */
		.head {
			width: 95%;
			margin: auto;
			height: 80px;
			line-height: 80px;
		}

		.body {
			/* height: 400px; */
			width: 95%;
			margin: auto;
			border-radius: 4px;
			box-shadow: 0 6px 10px rgba(0, 0, 0, .24), 0 8px 8px rgba(0, 0, 0, .12)
		}

		.title {
			height: 40px;
			line-height: 40px;
			border-bottom: #000000 solid 1px;
			padding-left: 20px;
			box-sizing: border-box;
		}

		.form {
			width: 96%;
			margin: auto;
			background-color: #F0F0F0;
		}
		.pagechose{
			float: right;
		}
	</style>
	<script type="text/javascript">

	</script>
	<body>
		<div id="element">
			<div class="head">
				<span style="font-family: PingFang SC;font-size: 20px;">
					订单管理
				</span>
				<i class="el-icon-document-copy"></i>
				<span style="font-family: PingFang SC;font-size: 18px;">
					- 订单查询
				</span>
			</div>
			<div class="body">
				<div class="title">
					<span style="font-family: PingFang SC;font-size:16px;">
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单查询
					</span>
				</div>
				<div class="form">
					<table border="0" cellspacing="0" cellpadding="10" style="width: 100%;">
						<tr>
							<td >订单编号:</td>
							<td ><el-input v-model="input.orderNo" placeholder="订单编号"></el-input></td>
							<td >手机号:</td>
							<td ><el-input v-model="input.telephone" placeholder="手机号"></el-input></td>
							<td >收货人:</td>
							<td><el-input v-model="input.accept" placeholder="收货人"></el-input></td>
						</tr>
						<tr>
							<td >订单状态:</td>
							<td><template>
								<el-select v-model="statusValue" placeholder="请选择">
									<el-option
											v-for="item in statusOptions"
											:key="item.value"
											:label="item.label"
											:value="item.value"
											@change="select($event)"
									>
									</el-option>
								</el-select>
							</template></td>
							<td >下单时间:</td>
							<td><el-date-picker
									v-model="date"
									align="right"
									type="date"
									size="large"
									placeholder="选择日期"
									:picker-options="pickerOptions">
							</el-date-picker></td>
							<td >用户名:</td>
							<td><el-input v-model="input.studentName" placeholder="用户名"></el-input></td>
						</tr>
					</table>

					<span style="margin-left: 400px;">
						<el-button type="primary" round @click="find()">查询</el-button>
					</span>
					<span style="margin-left: 50px;">
						<el-button type="success" round>导出</el-button>
					</span>
				</div>
				<div class="data">
					<template>
						<el-table :data="tableData" height="400" style="width: 96%;margin: auto;font-size: 12px"
								  :header-cell-style="{textAlign: 'center'}"
								  :cell-style="{ textAlign: 'center' }">
							<el-table-column prop="orderNo" label="订单编号" width="50px">
							</el-table-column>
							<el-table-column prop="createTime" label="下单时间" :formatter="formatDate">
							</el-table-column>
							<el-table-column prop="studentName" label="用户名">
							</el-table-column>
							<el-table-column prop="accept" label="收货人" width="70px">
							</el-table-column>
							<el-table-column prop="telephone" label="手机">
							</el-table-column>
							<el-table-column prop="money" label="订单金额">
							</el-table-column>
							<el-table-column prop="address" label="收货地址">
							</el-table-column>
							<el-table-column prop="status" label="支付状态">
								<template scope="scope">
									<p v-if="scope.row.status==1 || scope.row.status==2">未支付</p>
									<p v-else="scope.row.status==0 || scope.row.status==3 || scope.row.status==7">已支付</p>
								</template>
							</el-table-column>
							<el-table-column prop="status" label="订单状态">
								<template scope="scope">
									<p v-if="scope.row.status==8">已完成</p>
									<p v-if="scope.row.status==1">已取消</p>
									<p v-if="scope.row.status==2">待付款</p>
									<p v-if="scope.row.status==3">待发货</p>
									<p v-if="scope.row.status==4">待退款</p>
									<p v-if="scope.row.status==5">退货中</p>
									<p v-if="scope.row.status==6">已退货</p>
									<p v-if="scope.row.status==7">已付款</p>
								</template>
							</el-table-column>
							<el-table-column prop="transportBean.status" label="物流状态">
								<template scope="scope">
									<p v-if="scope.row.transportBean.status==0">未发货</p>
									<p v-if="scope.row.transportBean.status==1">途中</p>
									<p v-if="scope.row.transportBean.status==2">已收货</p>
									<p v-if="scope.row.transportBean.status==3">未发货</p>
									<p v-if="scope.row.transportBean.status==4">未创建</p>
								</template>
							</el-table-column>
							<el-table-column label="操作">
								<template scope="scope">
									<el-button @click="details(scope.row.id)">查看</el-button>
								</template>
							</el-table-column>
						</el-table>
					</template>
				</div>
				<div class="pagechose">
					<el-pagination
					  @size-change="handleSizeChange"
					  @current-change="handleCurrentChange"
					  :current-page.sync="currentPage3"
					  :page-size="5"
					  layout="prev, pager, next, jumper"
					  :total="page">
					</el-pagination>
				</div>
				<div style="clear: both;"></div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		parent.layui.admin.events.closeOtherTabs()
		let element = new Vue({
			el: "#element",
			data:{
				tableData:[],
				page:0,
				statusOptions:[
					{value: 8, label: '已完成'},
					{value: 1, label: '已取消'},
					{value: 2, label: '待付款'},
					{value: 3, label: '待发货'},
					{value: 4, label: '待退款'},
					{value: 5, label: '退货中'},
					{value: 6, label: '已退货'},
					{value: 7, label: '已付款'},
				],
				statusValue:"",
				input:{
					orderNo:"",
					telephone:"",
					accept:"",
					status:0,
					createTime:"",
					studentName:""
				},
				date:"",
			},
			methods:{
				//时间格式化
				formatDate:function(row, column) {
					// 获取单元格数据
					let data = row[column.property]
					// if (this.$MyComm.isEmpty(data)) {
					// 	return ''
					// }
					let dt = new Date(data)
					return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
				},
				details:function (id){
					axios.get("details?id="+id)
					.then(function (res) {
						window.sessionStorage.setItem("order", JSON.stringify(res.data));
						console.log(res.data)
						parent.layui.index.openTabsPage("order/orderDetail", "订单详情")
						// this.$router.push("/orderDetail")
					})
					.catch(function (error) {
						console.log(error)
					});
				},
				handleCurrentChange(val){
					let index = (val-1)*5
					axios.get("page?index="+index+"&nums=5")
							.then(function (res) {
								element.$data.tableData = res.data;
							})
							.catch(function (error) {s
								console.log(error)
							});
				},
				find(){
				//	获取下拉框及时间选择器数值
					element.$data.input.status = element.$data.statusValue
					element.$data.input.createTime = element.$data.date
					console.log(element.$data.input)
					let order = element.$data.input
					console.log(order);
					axios.post("find",order)
							.then(function (res) {
								element.$data.page = 1
								element.$data.tableData = res.data
								console.log(res)
							})
							.catch(function (error) {s
								console.log(error)
							});
				}
			}
		});
		axios.get("count")
				.then(function (res) {
					console.log(res.data)
					element.$data.page = res.data;
				})
		axios.get("page?index=0&nums=5")
				.then(function (res) {
					element.$data.tableData = res.data;
				})
				.catch(function (error) {s
					console.log(error)
				});
	</script>
</html>
